<?php include_once"header.php" ?>

<div class="tm-contact-img-container">
    
</div>

<section class="tm-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">

                <section>
                    <h3 class="tm-gold-text tm-form-title">Pellentesque fermentum mauris</h3>
                    <p class="tm-form-description">Vivamus accumsan blandit ligula. Sed lobortis efficitur sapien. Quisque vel sem eu turpis ullamcorper euismod. Praesent quis nisi ac augue luctus viverra. Sed et dui nisi. Fusce vitae dapibus justo.</p> 

                    <div id='msg_show'>
                        
                    </div>

                    <form action="javascript:;" method="post" class="tm-contact-form">                                
                        <div class="form-group">
                            <input type="text" id="msg_name" name="msg_name" class="form-control" placeholder="Name" />
                        </div>
                        <div class="form-group">
                            <input type="email" id="msg_email" name="msg_email" class="form-control" placeholder="Email" />
                        </div>
                        <div class="form-group">
                            <input type="text" id="msg_subject" name="msg_subject" class="form-control" placeholder="Subject" />
                        </div>
                        <div class="form-group">
                            <textarea id="msg_content" name="msg_content" class="form-control" rows="6" placeholder="Message" ></textarea>
                        </div>
                    
                        <button type="submit" onclick="setMsg()" class="tm-btn">Submit</button>
                        <input type="reset" name="reset" id='reset' style="display: none;" />                          
                    </form>   
                </section>
                

            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-contact-right">
                
                <div class="row">

                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6" id='list'>

                    </div>
                </div>
                
        </div>

    </div>
</section>
        
<?php include_once"footer.php" ?>

<script type="text/javascript">

    //请求留言数据并显示
    function getMsg(){
         //请求数据
        $.ajax({
            url:'api/search.php',
            type:'get',
            dataType:'json',
            data:{action:'message_show',limit:5},
            success:function(data){
                // console.log(data);
                var msg_str='';
                $.each(data.data,function(k,v){
                    //数据拼接
                    msg_str += '<div class="media">'
                    msg_str += '          <div class="media-body">'
                    msg_str += '            <h4 class="media-heading">'+v['msg_name']+' '+ v['msg_email'] +'</h4>'
                    msg_str += '            <p>'+ v['msg_content']+'</p>'
                    msg_str += '          </div>'
                    msg_str += '<div class="media-right" style="width: 20%;">'
                    msg_str += '<p>'+v['create_time']+'</p>'
                    msg_str += '</div>'
                    msg_str += '        </div>';
                })

                $('#msg_show').empty().append(msg_str);

            }
        })
    }
    
    $(function(){
        //文章异步
        $.ajax({
          url:'api/search.php',
          type:'get',
          dataType:'json',
          data:{action:'index_blog',limit:2},
          success:function(data){
            // console.log(data);
            var dt = data.data;
            var str = '';
            $.each(dt,function(k,v){
              str +='<div class="tm-content-box tm-margin-t-mid tm-content-box-contact">'
              str +='      <img src="uploads/'+ v['art_img'] +'" alt="Image" class="tm-margin-b-20 img-fluid">'
              str +='      <h4 class="tm-margin-b-20 tm-gold-text">'+ v['art_title'] +'</h4>'
              str +='      <p class="tm-margin-b-20 tm-p-small">'+ v['art_desc'] +'</p>'
              str +='      <a href="'+ v['art_link'] +'" class="tm-btn text-uppercase">Read More</a>    '
              str +='      </div> '
             
            });
            $('#list').empty().append(str);
          }
        })
        
        getMsg();
    })

    //提交方法
    function setMsg(){
        var msg_d = $('form').serializeArray();
        var msg_data = {};
        $.each(msg_d,function(k,v){
            msg_data[v['name']] = v['value'];
        })

        //提交表单
        $.ajax({
            url:'api/search.php',
            type:'post',
            dataType:'json',
            data:{"data":msg_data},
            success:function(data){         
                console.log(data);
            },
            error:function(){
                console.log('error');
            }
        })

        getMsg();

        $('#reset').trigger('click');

    }

</script>
      